<template>
    <Table 
        border
        stripe
        :columns="columns"
        :data="data.data"
        :loading="data.isLoading">
    </Table>
</template>
<script>
import filterTime from '@/filters/filterTime.js'
import { scrypt } from 'crypto';

export default {
    name: 'CarManageListView.vue',
    props: ['data'],
    data() {
        return {
            columns: [
                {
                    title: '编号',
                    key: 'id',
                    width: 80,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '汽车图片',
                    key: 'icon',
                    width: 200,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        let icons;
                        if(params.row.icon!=null && params.row.icon!=''){
                            icons = JSON.parse(params.row.icon);
                        }
                        return h('img',{
                            attrs: {src: (icons!=null?icons[0]:'')},
                            style: {
                                width: "100px",
                                verticalAlign: "middle"
                            },
                        },'img');
                    }
                },
                {
                    title: '名称',
                    key: 'name',
                    width: 200,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '发动机号',
                    key: 'engineNo',
                    width: 200,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '行驶证号',
                    key: 'vehicleLicense',
                    width: 200,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '公里数(km)',
                    key: 'km',
                    width: 100,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '车龄',
                    key: 'year',
                    width: 80,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '车辆报价(元)',
                    key: 'quotePrice',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '车辆首付款(元)',
                    key: 'downPrice',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '厂商价格(元)',
                    key: 'factoryPrice',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    width: 110,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        return h('span',filterTime.formatTimestamp(params.row.createTime));
                    }
                },
                {
                    title: '是否上架',
                    key: 'isShelf',
                    width: 100,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let title = params.row.isShelf==1?'上架':'下架';
                        return h('span',title);
                    }
                },
                {
                    title: '上架时间',
                    key: 'shelfTime',
                    width: 110,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        return h('span',filterTime.formatTimestamp(params.row.shelfTime));
                    }
                },
                {
                    title: '是否售出',
                    key: 'isSellOut',
                    width: 100,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let title = params.row.isSellOut==1?'售出':'未售出';
                        return h('span',title);
                    }
                },
                {
                    title: '售出时间',
                    key: 'sellOutTime',
                    width: 110,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        return h('span',filterTime.formatTimestamp(params.row.sellOutTime));
                    }
                },
                {
                    title: '过户次数',
                    key: 'transferNum',
                    width: 100,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let title = params.row.transferNum==null||params.row.transferNum==''?'--':params.row.transferNum;
                        return h('span', title);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        let detailBtn = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'detail', params: params})
                                }
                            }
                        }, '详情');
                        let delBtn = h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'remove', params: params})
                                }
                            }
                        }, '删除');
                        return h('div', [ detailBtn, delBtn]);
                    }
                }
            ]
        }
    },
    methods: {
        onAction (actionData) {
            this.$emit('on-action',actionData);
        }
    }
}
</script>
<style lang="less" scoped>

</style>



